<template>
  <div>
    <x-header :left-options="{backText: ''}" @on-click-more="showMenus = true">添加文字</x-header>
    <div class="ui-body">
      <group>
        <x-textarea v-model='text' placeholder="添加文字" :height="200" :rows="8" :cols="30" @on-blur="saveText"></x-textarea>
      </group>
      <div style="padding: 0 20px;margin-top: 20px;">
        <x-button type="primary" link="BACK">完成</x-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Group, XTextarea, XButton, XHeader } from 'vux'
import store from '@/store'

export default {
  store,
  components: {
    Group,
    XTextarea,
    XButton,
    XHeader
  },
  data () {
    return {
      text: this.$store.state.descList[this.$route.params.index] && !this.$route.params.create ? this.$store.state.descList[this.$route.params.index].text : ''
    }
  },
  methods: {
    saveText (value) {
      var descList = this.$store.state.descList
      if (this.text) {
        this.$route.params.create ? descList.splice(this.$route.params.index, 0, {text: this.text}) : descList.splice(this.$route.params.index, 1, {text: this.text})
      } else {
        descList.splice(this.$route.params.index, 1)
      }
      this.$store.commit('updateState', {key: 'descList', value: descList})
    }
  }
}
</script>

<style>
.weui-label{
  width: auto !important;
}
</style>
